<script lang="ts">
export default {
  name: "XDemo1",
};
</script>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import {
  getNewsItem,
  deleteNews,
  getNewsPage,
  getNewsList,
  getTitle,
} from "@/api/dbserver";
import { ElMessage } from "element-plus";
import { createModal } from "@/utils/createModal";
import { createDialog } from "@/utils/createDialog";
import Detail from "./detail.vue";
import Detail2 from "./detail2.vue";
import Header from "./header.vue";
const list: any = ref();
const loading = ref(false);
const _page = ref(1);
const _limit = ref(10);
const total = ref(0);
const search = reactive<{ id: null | number; title: string }>({
  id: null,
  title: "",
});
onMounted(() => {
  getGameList();
});
const getNewsById = () => {
  loading.value = true;
  getNewsItem(search.id as number).then((res: any) => {
    _page.value = 1;
    list.value = res;
    loading.value = false;
    total.value = res.length;
  });
};
const getGameList = () => {
  loading.value = true;
  getNewsPage({ _page: _page.value, _limit: _limit.value }).then((res: any) => {
    console.log(res, res.length);
    list.value = res;
    loading.value = false;
    getTotal();
  });
};
const getTotal = () => {
  getNewsList().then((res: any) => {
    total.value = res.length;
  });
};
const deleteGame = (id: number) => {
  console.log(id);
  deleteNews(id).then(() => {
    ElMessage.success("删除成功");
    getGameList();
  });
};
const addGame1 = () => {
  createModal({
    title: "新增",
    component: Detail,
    showFooter: true,
    size: "35%",
    data: {},
    handleClose: () => {
      getGameList();
    },
  });
};
const detail = (row: any) => {
  createModal({
    title: "详情",
    component: Detail,
    showFooter: true,
    size: "35%",
    data: row,
    handleClose: () => {
      getGameList();
    },
  });
};
const searchTitle = () => {
  getTitle(search.title).then((res: any) => {
    _page.value = 1;
    list.value = res;
    total.value = res.length;
  });
};
const reSearch = () => {
  search.id = null;
  search.title = "";
  getGameList();
};
const createDialog22 = () => {
  createDialog({
    title: "弹窗",
    width: "1000px",
    component: Detail2,
    data: {},
    footer: {
      show: true,
      position: "right",
      confirm: "confirm",
      cancle: "cancle",
    },
    showClose: false,
    header: Header,
  });
};
</script>

<template>
  <div class="wrap">
    <el-form inline>
      <el-form-item>
        <el-input
          style="width: 200px"
          v-model="search.id"
          placeholder="搜索ID"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          style="width: 200px"
          v-model="search.title"
          placeholder="搜索标题"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getNewsById">搜索ID</el-button>
        <el-button type="primary" @click="searchTitle">搜索标题</el-button>
        <el-button type="primary" @click="reSearch">重置</el-button>
        <el-button type="primary" @click="addGame1">新增</el-button>
        <el-button type="primary" @click="createDialog22">创建dialog</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      width="100%"
      v-loading="loading"
      border
      :header-cell-style="{ background: 'gray' }"
    >
      <el-table-column prop="id" label="id" width="180" />
      <el-table-column label="图片">
        <template v-slot="{ row }">
          <el-image
            v-if="typeof row.imgUrl == 'string'"
            style="width: 100px; height: 100px"
            :src="row.imgUrl"
          />
          <el-image
            v-else
            v-for="(item, key) in row.imgUrl"
            :key="key"
            style="width: 100px; height: 100px; margin-right: 10px"
            :src="item"
          />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column fixed="right" label="操作" width="180">
        <template v-slot="{ row }">
          <el-button type="primary" size="small" @click="detail(row)"
            >详情</el-button
          >
          <el-button type="danger" size="small" @click="deleteGame(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="_page"
      v-model:page-size="_limit"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="getGameList"
      @current-change="getGameList"
      style="float: right; margin: 10px"
    />
  </div>
</template>

<style lang="less" scoped>
.wrap {
  padding: 20px;
}
</style>
